<template>
    <div class="consult-wrap">
        <div class="form-wrap">
            <div class="form-item">
                <label>咨询类别</label>
                <div class="content">
                    <select v-model="form.type">
                        <option value="1">业务咨询</option>
                        <option value="2">监督投诉</option>
                        <option value="3">意见建议</option>
                        <option value="4">其他</option>
                    </select>
                </div>
            </div>
            <div class="form-item block">
                <label>标题</label>
                <div class="content h50">
                    <input v-model="form.title" type="text" class="border" placeholder="请输入咨询标题">
                </div>
            </div>
            <div class="form-item block">
                <label>咨询内容</label>
                <div class="content">
                    <textarea v-model="form.content" placeholder="请输入要咨询的内容"></textarea>
                </div>
            </div>
            <div class="form-item">
                <label>姓名</label>
                <div class="content">
                    <input v-model="form.name" type="text" placeholder="请输入您的姓名">
                </div>
            </div>
            <div class="form-item">
                <label>电话号码</label>
                <div class="content">
                    <input v-model="form.tel" type="tel" placeholder="请输入您的电话号码">
                </div>
            </div>
            <div class="form-item">
                <label>电子邮箱</label>
                <div class="content">
                    <input v-model="form.email" type="email" placeholder="请输入您的电子邮箱">
                </div>
            </div>
            <div class="form-item">
                <label>验证码</label>
                <div class="content">
                    <img class="validate-img" @click="getValidateCode" :src="validateCodeImg" alt="">
                    <input type="email" v-model="form.validateCode" placeholder="请输入">
                </div>
            </div>
            <br>
            <l-button class="save-btn" block @click="handlerSubmit">提交</l-button>
            <br>
        </div>
        <div class="help-wrap" style="margin-top: .5rem;">
            <div class="help-list" style="padding: 0;">
                <dl v-for="v in list" :key="v.id">
                    <dt>{{v.title}}</dt>
                    <dd>
                        <div class="desc">
                            <div v-html="v.content"></div>
                        </div>
                        <div class="desc" style="color: #bf0002;">
                            <div v-html="v.reply"></div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
    import list from '@m/mixins/list'

    export default {
        name: 'Consult',
        mixins: [list],
        data() {
            return {
                form: {
                    title: '',
                    content: '',
                    name: '',
                    tel: '',
                    email: '',
                    type: '1',
                    validateCode: '',
                },
                validateCodeImg: '',
                api: this.$api.qa.consultList
            }
        },
        computed: {},
        async mounted() {
            this.getList()
            const user = this.$utils.store.get('userInfo')
            console.log(user)
            this.form.name = user.userName
            this.form.email = user.email
            this.form.tel = user.phonenumber
            this.getValidateCode()
        },
        components: {},
        methods: {
            async handlerSubmit() {
                try {
                    await this.$api.qa.consult(this.form)
                    this.$notify({
                        type: 'success',
                        message: '咨询成功'
                    })
                    this.getList()
                    this.getValidateCode()
                } catch (e) {
                }
            },
            async getValidateCode() {
                try {
                    this.validateCodeImg = await this.$api.qa.validateCode()
                } catch (e) {
                    console.error(e)
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "../../../../style/var";
    @import "../../../../style/mixin";

    .consult-wrap {
        padding: 20px;

        .form-wrap {
            border-radius: 10px;
            background-color: #fff;
            padding: 20px;
        }
    }
</style>
